<template>
  <div class="pagination-container">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 20, 50, 100]"
      :total="totalItems"
      layout="total, sizes, prev, pager, next, jumper"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pager-count="5"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  currentPage: number
  totalPages: number
  pageSize: number
  totalItems: number
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'page-change', page: number): void
  (e: 'page-size-change', size: number): void
}>()

const handleSizeChange = (size: number) => {
  emit('page-size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('page-change', page)
}
</script>

<style scoped>
@import './Pagination.css';
</style>